<template>
    <div class="card-wrap flex-column justify-end card-padding">
        <div class="card-title-wrap">
            <span>诉讼处理记录</span>
            <span></span>
        </div>
        <el-descriptions title="" :column=2>
            <el-descriptions-item label="诉讼状态">
                {{ info.proceedStatus|filterNull }}
            </el-descriptions-item>
            <el-descriptions-item label="完成时间">
                {{ info.completeTime|filterNull }}
            </el-descriptions-item>
            <el-descriptions-item label="说明">
                {{ info.completeExplain|filterNull }}
            </el-descriptions-item>
            <el-descriptions-item label="附件" >
                <div class="flex">
                    <ImageCommon disabled v-model="info.file" :up-type="2" info="选择附件" :limit="20"></ImageCommon>
                </div>
            </el-descriptions-item>
        </el-descriptions>
        <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="" name="1">
            <template slot="title">
            <span>和解方案</span>
            </template>
            <el-table fit :data="definitionList" border v-if="tableCloumns.length > 0">
                <TableCloumn v-for="item in tableCloumns" :cellOptions="item"></TableCloumn>
                <el-table-column
                        label="附件"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <div class="handle">
                            <el-button
                                size="mini"
                                type="text"
                                @click="previewImage([scope.row.file])"
                                >预览</el-button
                            >
                            <el-button size="mini" type="text"
                                >下载</el-button
                            >
                        </div>
                        </template>
                </el-table-column>
            </el-table>
        </el-collapse-item>
        <el-collapse-item title="" name="2">
            <template slot="title">
            <span>和解结果</span>
            </template>
            <el-table fit :data="definitionList1" border v-if="tableCloumns1.length > 0">
                <TableCloumn v-for="item in tableCloumns1" :cellOptions="item"></TableCloumn>
                <el-table-column
                        label="和解协议"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <div class="handle">
                            <el-button
                                size="mini"
                                type="text"
                                @click="previewImage([scope.row.file])"
                                >预览</el-button
                            >
                            <el-button size="mini" type="text"
                                >下载</el-button
                            >
                        </div>
                        </template>
                </el-table-column>
                <el-table-column
                        label="附件"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <div class="handle">
                            <el-button
                                size="mini"
                                type="text"
                                @click="previewImage([scope.row.url])"
                                >预览</el-button
                            >
                            <el-button size="mini" type="text"
                                >下载</el-button
                            >
                        </div>
                        </template>
                </el-table-column>
            </el-table>
        </el-collapse-item>
        <el-collapse-item title="" name="3">
            <template slot="title">
            <span>调解方案</span>
            </template>
            <el-table fit :data="definitionList2" border v-if="tableCloumns2.length > 0">
                <TableCloumn v-for="item in tableCloumns2" :cellOptions="item"></TableCloumn>
                <el-table-column
                        label="附件"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <div class="handle">
                            <el-button
                                size="mini"
                                type="text"
                                @click="previewImage([scope.row.file])"
                                >预览</el-button
                            >
                            <el-button size="mini" type="text"
                                >下载</el-button
                            >
                        </div>
                        </template>
                </el-table-column>
            </el-table>
        </el-collapse-item>
        <el-collapse-item title="" name="4">
            <template slot="title">
            <span>调解结果</span>
            </template>
            <el-table fit :data="definitionList3" border v-if="tableCloumns3.length > 0">
                <TableCloumn v-for="item in tableCloumns3" :cellOptions="item"></TableCloumn>
                <el-table-column
                        label="调解书"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <div class="handle">
                            <el-button
                                size="mini"
                                type="text"
                                @click="previewImage([scope.row.file])"
                                >预览</el-button
                            >
                            <el-button size="mini" type="text"
                                >下载</el-button
                            >
                        </div>
                        </template>
                </el-table-column>
                <el-table-column
                        label="附件"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <div class="handle">
                            <el-button
                                size="mini"
                                type="text"
                                @click="previewImage([scope.row.file])"
                                >预览</el-button
                            >
                            <el-button size="mini" type="text"
                                >下载</el-button
                            >
                        </div>
                        </template>
                </el-table-column>
            </el-table>
        </el-collapse-item>
        <el-collapse-item title="" name="5">
            <template slot="title">
            <span>判决结果</span>
            </template>
            <el-table fit :data="definitionList4" border v-if="tableCloumns4.length > 0">
                <TableCloumn v-for="item in tableCloumns4" :cellOptions="item"></TableCloumn>
                <el-table-column
                        label="判决书"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <div class="handle">
                            <el-button
                                size="mini"
                                type="text"
                                @click="previewImage([scope.row.file])"
                                >预览</el-button
                            >
                            <el-button size="mini" type="text"
                                >下载</el-button
                            >
                        </div>
                        </template>
                </el-table-column>
                <el-table-column
                        label="附件"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <div class="handle">
                            <el-button
                                size="mini"
                                type="text"
                                @click="previewImage([scope.row.file])"
                                >预览</el-button
                            >
                            <el-button size="mini" type="text"
                                >下载</el-button
                            >
                        </div>
                        </template>
                </el-table-column>
            </el-table>
        </el-collapse-item>
        <el-collapse-item title="" name="6">
            <template slot="title">
            <span>强制执行结果</span>
            </template>
            <el-table fit :data="definitionList5" border v-if="tableCloumns5.length > 0">
                <TableCloumn v-for="item in tableCloumns5" :cellOptions="item"></TableCloumn>
                <el-table-column
                        label="强制执行立案通知书"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <div class="handle">
                            <el-button
                                size="mini"
                                type="text"
                                @click="previewImage([scope.row.file])"
                                >预览</el-button
                            >
                            <el-button size="mini" type="text"
                                >下载</el-button
                            >
                        </div>
                        </template>
                </el-table-column>
                <el-table-column
                        label="附件"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <div class="handle">
                            <el-button
                                size="mini"
                                type="text"
                                @click="previewImage([scope.row.file])"
                                >预览</el-button
                            >
                            <el-button size="mini" type="text"
                                >下载</el-button
                            >
                        </div>
                        </template>
                </el-table-column>
            </el-table>
        </el-collapse-item>
        </el-collapse>

    </div>

</template>

<script>
import TableCloumn from "@/views/finance/manage/tableColumn/index.vue";
export default {
    name: "IitigationHandlingHistory",
    components: {TableCloumn},
    props:{
        info: {
            type: Object,
            default: () => ({}),
        },
    },
    dicts: [ 'progress_litigation'],
    data() {
        return {
            form:{
                rentedUnitNum:''
            },
            definitionList: [
                {
                    payeeType:1, customName:20,carNo:2,title:3,pushType2:2012-12-2
                },
                {
                    payeeType:1, customName:30,carNo:2,title:3,pushType2:2012-12-2
                }
            ],
            tableCloumns:[],
            definitionList1: [
                {
                    payeeType:1, customName:20,carNo:2,title:3,pushType2:2012-12-2
                },
                {
                    payeeType:1, customName:30,carNo:2,title:3,pushType2:2012-12-2
                }
            ],
            tableCloumns1:[],
            definitionList2: [
                {
                    payeeType:1, customName:20,carNo:2,title:3,pushType2:2012-12-2
                },
                {
                    payeeType:1, customName:30,carNo:2,title:3,pushType2:2012-12-2
                }
            ],
            tableCloumns2:[],
            definitionList3: [
                {
                    payeeType:1, customName:20,carNo:2,title:3,pushType2:2012-12-2
                },
                {
                    payeeType:1, customName:30,carNo:2,title:3,pushType2:2012-12-2
                }
            ],
            tableCloumns3:[],
            definitionList4: [
                {
                    payeeType:1, customName:20,carNo:2,title:3,pushType2:2012-12-2
                },
                {
                    payeeType:1, customName:30,carNo:2,title:3,pushType2:2012-12-2
                }
            ],
            tableCloumns4:[],
            definitionList5: [
                {
                    payeeType:1, customName:20,carNo:2,title:3,pushType2:2012-12-2
                },
                {
                    payeeType:1, customName:30,carNo:2,title:3,pushType2:2012-12-2
                }
            ],
            tableCloumns5:[],
            activeNames:["1"],
        };
    },
    async created(){
        this.tableCloumns = [
                {
                    label: "说明",
                    prop: "explain",

                },
                {
                    label: "提交人",
                    prop: "customName",
                },
                {
                    label: "提交时间",
                    prop: "carNo",
                },
        ]
        this.tableCloumns1 = [
                {
                    label: "收款方户名",
                    prop: "lessorName",

                },
                {
                    label: "收款方开户行",
                    prop: "lessorBank",
                },
                {
                    label: "收款方账号",
                    prop: "lessorAccount",
                },
                {
                    label: "付款方户名",
                    prop: "lesseeName",
                },
                {
                    label: "付款方开户行",
                    prop: "lesseeBank",
                },
                {
                    label: "付款方账号",
                    prop: "lesseeAccount",
                },
                {
                    label: "和解金额",
                    prop: "amount",
                },
                {
                    label: "最后一笔支付时间",
                    prop: "endPayTime",
                },
                {
                    label: "说明",
                    prop: "explain",
                },
                {
                    label: "提交人",
                    prop: "carNo",
                },
                {
                    label: "提交时间",
                    prop: "carNo",
                },
        ]
        this.tableCloumns2 = [
                {
                    label: "说明",
                    prop: "explain",

                },
                {
                    label: "提交人",
                    prop: "customName",
                },
                {
                    label: "提交时间",
                    prop: "carNo",
                },
        ]
        this.tableCloumns3 = [
                {
                    label: "收款方户名",
                    prop: "lessorName",

                },
                {
                    label: "收款方开户行",
                    prop: "lessorBank",
                },
                {
                    label: "收款方账号",
                    prop: "lessorAccount",
                },
                {
                    label: "付款方户名",
                    prop: "lesseeName",
                },
                {
                    label: "付款方开户行",
                    prop: "lesseeBank",
                },
                {
                    label: "付款方账号",
                    prop: "lesseeAccount",
                },
                {
                    label: "调解金额",
                    prop: "amount",
                },
                {
                    label: "最后一笔支付时间",
                    prop: "endPayTime",
                },
                {
                    label: "说明",
                    prop: "explain",
                },
                {
                    label: "提交人",
                    prop: "carNo",
                },
                {
                    label: "提交时间",
                    prop: "carNo",
                },
        ]
        this.tableCloumns4 = [
                {
                    label: "收款方户名",
                    prop: "lessorName",

                },
                {
                    label: "收款方开户行",
                    prop: "lessorBank",
                },
                {
                    label: "收款方账号",
                    prop: "lessorAccount",
                },
                {
                    label: "付款方户名",
                    prop: "lesseeName",
                },
                {
                    label: "付款方开户行",
                    prop: "lesseeBank",
                },
                {
                    label: "付款方账号",
                    prop: "lesseeAccount",
                },
                {
                    label: "调解金额",
                    prop: "amount",
                },
                {
                    label: "最后一笔支付时间",
                    prop: "endPayTime",
                },
                {
                    label: "说明",
                    prop: "explain",
                },
                {
                    label: "提交人",
                    prop: "carNo",
                },
                {
                    label: "提交时间",
                    prop: "carNo",
                },
        ]
        this.tableCloumns5 = [
                {
                    label: "说明",
                    prop: "explain ",

                },
                {
                    label: "提交人",
                    prop: "customName",
                },
                {
                    label: "提交时间",
                    prop: "carNo",
                },
        ]
    },
    methods: {
        // 预览图片
        previewImage(urls) {
            console.log(urls);
            this._previewImages(urls);
        },
        handleChange(){},
    }
};
</script>


<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

.el-form-item {
    margin-bottom: 10px;
    width: 70%;
}

::v-deep .el-tabs__item {
    font-size: 16px !important;
    //color: #333333;
    font-weight: bold;
}

::v-deep .el-descriptions__header {
    margin-top: -8px !important;
    margin-bottom: 10px !important;
}
</style>
